import React from 'react';
import { connect } from 'dva';
import styles from './basicProfile.css';

import avatar from '../../../../../../framework/utils/avatar';
const defaultAvatar = require("../../../../../../icons/personal/default-avatar.jpg");
const noAvatar = require('../../../../../../assets/avatar.jpg')

const PersonalHeader = ({
  name,
  imgURL,
  headerArr,
  onSimpleInfo=()=>{},
  onViewClick=()=>{},
}) => {
  const showAvatar = imgURL ? imgURL : noAvatar;

  return (
    <div className={styles.container}>
      <div className={styles.headImg} onClick={()=>onSimpleInfo()}>
        <div className={styles.avatar}>{avatar(name, showAvatar)}</div>
        <div >{name}</div>
      </div>
      <div className={styles.headArr}>
        {
          headerArr.map((item, key) => {
            return (
              <div key={item.id.toString()}
                className={styles.headArrItem}
                onClick={() => onViewClick(item.urlString)}
                >
                <div className={styles.itemValue}>{item.value}</div>
                <div>{item.title}</div>
              </div>
            )
          })
        }
      </div>
    </div>
  )
}



  export default PersonalHeader
